<template>
  <div class="bg">
    <el-row>
      <el-form :model="user" ref="userFormRef" :rules="rules" label-width="80px" label-position="left">
        <span id="title">{{ this.MyData.title }}</span>
        <el-form-item label="手机号" prop="phone">
          <el-input prefix-icon="el-icon-user" v-model="user.phone" clearable placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="vericode">
          <el-input prefix-icon="el-icon-user" v-model="user.code" clearable placeholder="请输入验证码"></el-input>
          <el-button type="primary" plain @click="get_code" v-if="!isSend" style="width: 110px">获取验证码</el-button>
          <el-button type="primary" plain v-else style="width: 110px" disabled>{{ this.seconds }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-row class="f">
            <el-button type="primary" @click="login('userForm')" class="loginBtn">立即登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-row>
        </el-form-item>
        <el-row class="register">
          <router-link :to="{ name: 'login' }"><el-button type="text">使用账号登录</el-button></router-link>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { get_code, login } from '@/api/login'

export default {
  name: 'Phone',
  data() {
    // 验证手机号码的规则
    const checkMobile = (rule, value, cb) => {
      // 验证手机号码的正则表达式
      const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (regMobile.test(value) || value === '') {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      user: {
        phone: '',
        code: ''
      },
      url: '',
      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      timer: '',
      isSend: false,
      seconds: 60
    }
  },
  methods: {
    // 获取短信验证码
    get_code() {
      get_code(this.user.phone).then(res => {
        if (res.data.code === 200) {
          this.isSend = true
          const _this = this
          this.timer = setInterval(function () {
            _this.seconds--
            if (_this.seconds === 0) {
              clearInterval(_this.timer)
              _this.isSend = false
            }
          }, 1000)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('发送验证码出现问题，请稍后重试')
      })
      // const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      // if (!regMobile.test(this.user.phone) || this.user.phone === '') {
      //   this.$message.error('请输入手机号！')
      // } else {
      // }
    },

    // 用户登录请求
    login() {
      this.$refs.userFormRef.validate(valid => {
        if (!valid) return
        // 发起登录请求
        login(this.ugser).then(res => {
          if (res.data.code === 200) {
            window.localStorage.setItem('username', res.data.data.username)
            this.$router.push({ name: 'home' })
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error('后端服务连接异常,请重试!')
        })
      })
    },
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      this.$refs.userFormRef.resetFields()
    }
  }
}
</script>

<style scoped>
.bg {
  background: url("../../assets/images/backgroud.png") no-repeat center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#title{
  position: relative;
  top: -100px;
  left: 80px;
  font-size: 35px;
  color: white;
}
.el-form{
  width: 360px;
  margin-right: 10px;
  padding: 10px 60px;
  border-radius: 5px;
  border: 2px solid rgba(249, 244, 244, 0.79);
}
::v-deep .el-form-item__label{
  color: white;
  font-size: 15px;
  font-weight: bolder;
}

.vericode .el-input{
  width: 160px;
}
.vericode .el-button{
  float: right;
}
.register{
  margin: 15px 0 15px 0;
  display: flex;
  justify-content: right;
  position: relative;
}
.register .el-button{
  font-size: 15px;
  color: white;
}
.el-button--text span{
  font-weight: bolder;
  color: white;
}
.loginBtn {
  width: 100%;
}
</style>
